<template>
	<!-- 题目列表 -->
	<view class="wm">
		<block v-if="qustion.length > 0">
			<view class="question" v-for="(item,i) in qustion" :key="item.id"  @click="goDetail(item.id,i+1)">
				<view class="line1">
					<view class="title">
						第{{i+1}}题：
						{{item.titletype == 2 ? '点击查看详细题目内容' : item.title}}
					</view>
					<view v-if="i>4 && userInfo.vip == 0">
						<uni-icons type="locked-filled" size="30rpx" color="#ff1e0e"></uni-icons>
					</view>
					<view class="type">
						{{item.type}}
					</view>

				</view>
				<view class="line2">
						<view class="complexity">
							难度:
							<block v-if="item.complexity == 1">
								<uni-icons type="star-filled" color="#FF0033"></uni-icons>
								<uni-icons type="star" color="#FF0033"></uni-icons>
								<uni-icons type="star" color="#FF0033"></uni-icons>
								<uni-icons type="star" color="#FF0033"></uni-icons>
								<uni-icons type="star" color="#FF0033"></uni-icons>
							</block>
							<block v-else-if="item.complexity == 2">
								<uni-icons type="star-filled" color="#FF0033"></uni-icons>
								<uni-icons type="star-filled" color="#FF0033"></uni-icons>
								<uni-icons type="starhalf" color="#FF0033"></uni-icons>
								<uni-icons type="star" color="#FF0033"></uni-icons>
								<uni-icons type="star" color="#FF0033"></uni-icons>
							</block>
							<block v-else-if="item.complexity == 3">
								<uni-icons type="star-filled" color="#FF0033"></uni-icons>
								<uni-icons type="star-filled" color="#FF0033"></uni-icons>
								<uni-icons type="star-filled" color="#FF0033"> </uni-icons>
								<uni-icons type="star-filled" color="#FF0033"></uni-icons>
								<uni-icons type="star-filled" color="#FF0033"></uni-icons>
							</block>
						</view>
						<view class="time">
							更新时间：{{item.update_time}}
						</view>
					</view>
			</view>
			
		</block>
		<block v-else>
			<no-data></no-data>
		</block>
		
		<!-- vip -->
		<vip :showvip="showvip" @changeShow="changeShow"></vip>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				queryObj:{
					schoolid:0,
					pageNumber:1,
					length:30,
					questionwayid:0,
					questiontypeid:0,
					questioncourseid:0,
				},
				qustion:[],
				isloading:false,
				total:0,
				showvip:false
			}
		},
		onLoad(option){
			this.queryObj.schoolid = option.schoolid || 0;
			this.queryObj.questionwayid = option.questionwayid || 0;
			this.queryObj.questiontypeid = option.questiontypeid || 0;
			this.queryObj.questioncourseid = option.questioncourseid || 0;
			this.getCourse();
		},
		computed:{
			...mapState("m_user",["userInfo"])
		},
		methods: {
			async getCourse(){
				//打开节流阀
				this.isloading = true;
				const {data:res} = await uni.$http.post("Questions/getAllQuestion",this.queryObj);
				this.isloading = false;
				//请求失败
				if(res.meta.status !== 1) return uni.$showMsg();
				//请求成功
				this.qustion = [...this.qustion,...res.data];
				this.total = res.total;
			},
			goDetail(id,i){
				if(this.userInfo.vip == 0){
					if(i<=5){
						uni.navigateTo({
							url:'/subpkg/question_detail/question_detail?schoolid='+this.queryObj.schoolid+'&questionwayid='+this.queryObj.questionwayid+'&questiontypeid='+this.queryObj.questiontypeid+'&questioncourseid='+this.queryObj.questioncourseid+'&questionid='+id+'&q_i='+i
						})
					}else{
						this.showvip = true;
					}
				}else if(this.userInfo.vip == 1){
					uni.navigateTo({
						url:'/subpkg/question_detail/question_detail?schoolid='+this.queryObj.schoolid+'&questionwayid='+this.queryObj.questionwayid+'&questiontypeid='+this.queryObj.questiontypeid+'&questioncourseid='+this.queryObj.questioncourseid+'&questionid='+id+'&q_i='+i
					})
				}
			},
			changeShow(status){
				this.showvip = status
			}

		},
		/**
		 * 学校列表上拉加载更多
		 */
		onReachBottom(){
			//根据节流阀加载数据
			if(this.isloading) return;
			//让页码值自增+1
			this.queryObj.pageNumber++
			//如果当前pageNumber大于了最大页数则不加载
			if(this.queryObj.pageNumber <= this.total){
				this.getCourse(); //请求数据
			}
		},
		
	}
</script>

<style lang="scss">
@font-face {
	font-family: CustomFont;
	src: url('./iconfont.ttf');
}
.question{
	background-color:#fff;
	border-radius: 10rpx;
	margin-top:10rpx;
	padding:30rpx 10rpx;
}
.line1{
	display: flex;
	justify-content: space-between;
	.title{
		height:40rpx;
		width:78%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size:30rpx;
		line-height:40rpx;
	}
	.type{
		height:40rpx;
		width:15%;
		text-align: center;
		color: #fff;
		font-size:25rpx;
		line-height: 40rpx;
		border-radius: 8rpx;
		background:linear-gradient(to right,#68d0e3,#93bdf3);
	}
}
.line2{
	height:40rpx;
	display:flex;
	justify-content: space-between;
	margin-top:20rpx;
	.complexity{
		display: flex;
		justify-content: left;
		align-items: center;
		height:40rpx;
		font-size:25rpx;
	}
	.time{
		height:40rpx;
		font-size:25rpx;
	}
}
.lock{
	height: 100rpx;
	background-color:#fff;
	border-radius: 10rpx;
	margin-top:10rpx;
	padding:30rpx 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

</style>
